import { useEditor } from '@craftjs/core';
import { Layers } from '@craftjs/layers';
import { Col, Divider, Row } from 'antd';
import styled from 'styled-components';
import { CardInfo, ProForm, ProTable as RexProTable } from './BaseComponents';
import * as OtherComponent from './BaseComponents/BitLowCode';

const CelStyle = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  border: 1px solid #d3d3d3;
  /* margin-right: -1px;
  margin-bottom: -1px;
  margin-top: -1px;
  margin-left: -1px; */
  margin: -1px;
  cursor: pointer;
  background: #fff;
  color: #666;
  transition: 0.5s;
  position: relative;
  z-index: 1;

  &:hover {
    z-index: 2;
    box-shadow: inset 0 0 8px 0px #1677ff30;
    border-color: #1677ff;
  }
`;

const LayersStyle = styled.div`
  /* flex: 1; */
  height: calc(100% - 492px);
  width: 100%;
  overflow: auto;

  h2 {
    margin-bottom: 0%;
  }

  .craft-layer-node {
    width: 100%;
  }
`;

export const ToolBox = () => {
  const {
    connectors: { create },
  } = useEditor();

  return (
    <div
      style={{
        height: '100%',
        borderRight: '1px solid #d3d3d3',
        boxSizing: 'border-box',
      }}
    >
      <Row gutter={0}>
        <Col span={12}>
          <CelStyle
            ref={(dom) =>
              create(dom as HTMLElement, <CardInfo title="Card Info" />)
            }
          >
            CardInfo
          </CelStyle>
        </Col>
        <Col span={12}>
          <CelStyle ref={(dom) => create(dom as HTMLElement, <RexProTable />)}>
            ProTable
          </CelStyle>
        </Col>
        <Col span={12}>
          <CelStyle ref={(dom) => create(dom as HTMLElement, <ProForm />)}>
            ProForm
          </CelStyle>
        </Col>
        <Divider />
        {Object.values(OtherComponent)
          .sort((a, b) => (a.config.sort ?? 99) - (b.config.sort ?? 99))
          .map((item) => {
            return (
              <Col
                key={item.displayName}
                style={{ display: item.config.hidden ? 'none' : '' }}
                span={12}
              >
                <CelStyle
                  ref={(dom) => item.toolbox(create, dom as HTMLElement)}
                >
                  {item.config.name || item.displayName}
                </CelStyle>
              </Col>
            );
          })}
        <Divider />
        <LayersStyle>
          <Layers />
        </LayersStyle>
      </Row>
    </div>
  );
};
